<template>
	<view class="class">
		<u-navbar :border-bottom="false" title="作业批改"></u-navbar>
		<view class="part01 acea-row row-column">
			<view class="studentInfo acea-row row-middle">
				<!-- <image src="../../../static/images/noticeDetail-student-default.png" mode=""></image> -->
				<view class="info acea-row row-column">
					<text>{{name}}</text>
					<!-- <text>2021-04-22 17:30</text> -->
				</view>
			</view>
			<view class="title">{{info.title}}</view>
			<view class="introduction">{{info.answer}}</view>
			<view class="imgList" v-if="imgList.length != 0">
				<scroll-view scroll-x="true" class="scroll-view">
					<view class="imgItem" v-for="(item,index) in imgList" :key="index">
						<image v-if="!checkVideoUrl(item)" :src="item" mode="" @click="previewImage(index)"></image>
					</view>
					<view class="imgItem" v-for="(item,index) in imgList" :key="index">
						<video @click="doPreviewVideo(item)" v-if="checkVideoUrl(item)" :src="item" :controls='false'></video>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="part02">
			<u-form :model="form" label-position="top" :label-style="{color:'#1F2329',fontSize: '28rpx',lineHeight: '40rpx'}">
				<u-form-item class="form-item" prop="introtuction">
					<view class="label acea-row row-middle">
						<text>作业批复</text>
						<text>（如填写则会发送信息给学员）</text>
					</view>
					<u-input v-model="form.introtuction" type="textarea" placeholder="请填写作业批复" :maxlength="99999"/>
				</u-form-item>
				<!-- <u-form-item ref="formItem" class="form-item" label="上传图片" prop="picList">
					<u-upload ref="uUpload" :action="uploadUrl" :auto-upload="true" width="188" height="188"></u-upload>
				</u-form-item> -->
			</u-form>
		</view>
		<view :style="'height: calc(152rpx + '+iosSafeBottom+'px + '+SafeBottom+'rpx);'"></view>
		<view class="footer" :style="'padding-bottom: calc('+iosSafeBottom+'px + '+SafeBottom+'rpx);box-sizing: content-box;'">
			<view class="btn" @click="response" v-if="state=='已提交'">批改作业</view>
			<view class="btn" v-else>已批阅</view>
		</view>
		<previewVideo :show.sync="showPreviewVideo" :url="previewVideoUrl"></previewVideo>
	</view>
</template>

<script>
	import request from "../../../api/request.js"
	const app = getApp()
	export default{
		data(){
			return{
				id:'',
				uploadUrl:'',
				iosSafeBottom:app.globalData.iosSafeBottom,
				SafeBottom:app.globalData.iosSafeBottom==0?'24':'-24',
				name:'',
				state:'',
				info:{},
				form:{
					introtuction:'',
					picList:[]
				},
				imgList:[],
				
				showPreviewVideo:false,
				previewVideoUrl:'',
				// imgList:[
				// 	'https://img02.mockplus.cn/idoc/figma/2021-04-22/7a30edba-73fc-465c-a8be-46ab2cbe0f8a.png',
				// 	'https://img02.mockplus.cn/idoc/figma/2021-04-22/7a30edba-73fc-465c-a8be-46ab2cbe0f8a.png',
				// 	'https://img02.mockplus.cn/idoc/figma/2021-04-22/7a30edba-73fc-465c-a8be-46ab2cbe0f8a.png',
				// 	'https://img02.mockplus.cn/idoc/figma/2021-04-22/7a30edba-73fc-465c-a8be-46ab2cbe0f8a.png',
				// 	'https://img02.mockplus.cn/idoc/figma/2021-04-22/7a30edba-73fc-465c-a8be-46ab2cbe0f8a.png',
				// ]
			}
		},
		onLoad(e) {
			console.log(e)
			if(e.id){
				this.id = e.id
				this.name = e.name
				this.state = e.state
				this.getInfo(e.id)
			}
		},
		methods:{
			response(){
				let data = {
					taskid:this.id,
					respon:this.form.introtuction
				}
				request.go((e)=>{
					uni.showToast({
						icon:"success",
						title:"批改成功",
						duration:600
					})
					setTimeout(()=>{
						uni.navigateBack({})
					},600)
				},"/Jwteachertask/taskhandle",data,"POST")
			},
			getInfo(id){
				request.go((e)=>{
					this.info = e.data
					let imgList = []
					if(e.data.answerfile){
						for(let i of e.data.answerfile){
							imgList.push(app.globalData.baseUrl+i)
						}
					}
					this.imgList = imgList
				},"/Jwteachertask/taskinfo",{taskid:id},"POST")
			},
			previewImage(current){
				let imgList = []
				for(let i of this.imgList){
					if(!app.globalData.checkVideoUrl(i)){
						imgList.push(i)
					}
				}
				uni.previewImage({
					urls:imgList,
					current
				})
			},
			checkVideoUrl(url){
				if(url != undefined){
					return app.globalData.checkVideoUrl(url)
				}
			},
			doPreviewVideo(url){
				this.showPreviewVideo = true;
				this.previewVideoUrl = url;
			},
		}
	}
</script>

<style scoped>
	.class{
		min-height: 100vh;
		background-color: #f7f8fa;
	}
	.class .part01{
		width: 686rpx;
		padding: 48rpx 32rpx;
		margin: 32rpx auto;
		overflow: hidden;
		background-color: #FFFFFF;
		border-radius: 24rpx;
	}
	.class .part01 .studentInfo image{
		width: 96rpx;
		height: 96rpx;
		margin-right: 32rpx;
	}
	.class .part01 .studentInfo .info text:nth-child(1){
		font-size: 32rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #1f2329;
		line-height: 44rpx;
		margin-bottom: 8rpx;
	}
	.class .part01 .studentInfo .info text:nth-child(2){
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #8f959e;
		line-height: 32rpx;
	}
	.class .part01 .title{
		/* margin-top: 32rpx; */
		font-size: 36rpx;
		font-family: PingFang SC, PingFang SC-Semibold;
		font-weight: 700;
		color: #1f2329;
		line-height: 52rpx;
	}
	.class .part01 .introduction{
		margin-top: 16rpx;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #1f2329;
		line-height: 40rpx;
	}
	.class .part01 .imgList{
		width: 100%;
		margin-top: 32rpx;
		position: relative;
		overflow: hidden;
	}
	.class .part01 .imgList .imgItem{
		margin-right: 16rpx;
		display: inline-block;
	}
	.class .part01 .imgList .imgItem:last-of-type{
		margin-right: 0;
	}
	.class .part01 .imgList .imgItem image{
		width: 196rpx;
		height: 196rpx;
	}
	.class .part01 .imgList .imgItem video{
		width: 196rpx;
		height: 196rpx;
	}
	.class .part01 .imgList .scroll-view{
		display:flex;
		white-space: nowrap;
	}
	.class .part02{
		width: 686rpx;
		padding: 32rpx;
		background-color: #FFFFFF;
		box-sizing: border-box;
		border-radius: 24rpx;
		margin: 0 auto;
	}
	.class .part02 .label{
		flex-wrap: nowrap;
	}
	.class .part02 .label text{
		white-space: nowrap;
	}
	.class .part02 .label text:nth-child(1){
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #1f2329;
		line-height: 40rpx;
	}
	.class .part02 .label text:nth-child(2){
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #8F959E;
		line-height: 40rpx;
	}
	.class .part02 .form-item >>> .u-list-item{
		margin: 9rpx;
	}
	.class .footer{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 120rpx;
		background-color: #FFFFFF;
		z-index: 999;
	}
	.class .footer .btn{
		width: 622rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		margin: 24rpx auto 0;
		font-size: 32rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #ffffff;
		z-index: 99;
		background-color: #1661FF;
	}
	.class .placeholder{
		height: 144rpx;
	}
</style>
